﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="公告标题">
                    <el-input v-model="searchForm.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-row>
                <el-button @click="handleAdd">新增</el-button>
            </el-row>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="title"
                        width="180"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="apiName"
                        width="180"
                        label="机器人名称">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="创建人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="创建人工号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="crtTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="是否可用"
                        width="180">
                    <template slot-scope="scope">
                        {{ scope.row.isDelete=='1'?'是':'否' }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.rows"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    :total="page.total">
            </el-pagination>
        </el-card>
    </div>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                robotForm: {
                    immediate: "1",
                    title: '',
                    noticeType: 'text',
                    apiAuth: '',
                    content: '',
                    image:'',
                    executeType: '',
                    status: '1',
                },
                searchForm: {
                    title: ''
                },
                page: {
                    total: 0,
                    currentPage: 1,
                    rows: 10,
                },
                apiList: [],
                noticeTypeList: noticeTypeList,
                tableData: []
            }
        },
        mounted: function () {
            that = this
            this.search()
            this.queryUserApiPermission()
        },
        methods: {
            openCreateDialog(params) {
                var paramsStr=JSON.stringify(params);
                layer.open({
                    content: './create.html?params=' +encodeURI(paramsStr),
                    type: 2,
                    offset: 't',
                    area: ['80%', '90%'],
                    fix: false,
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    success: function (layero, index) {
                    }
                })
            },
            queryUserApiPermission() {
                $.get('/office/menu/queryUserApiPermission', function (res) {
                    that.apiList = res.obj;
                })
            },
            search: function () {
                var params = this.searchForm;
                params.page = this.page.currentPage;
                params.rows = this.page.rows;
                $.get('/office/noticeManage/queryNoticeManageList', params, function (res) {
                    that.tableData = res.obj.rows
                    that.page.total = res.obj.total
                })
            },
            handleEdit(row) {
                that.openCreateDialog(row)
            },
            handleAdd(){
                that.openCreateDialog(that.robotForm)

            },
            handleDelete(id) {
                layer.confirm('确认删除？', function () {
                    $.post('/office/noticeManage/deleteNoticeManage', {id}, function (res) {
                        that.search()
                        showAlert(res.msg, 1)
                    })
                })
            },
            handleSizeChange() {
            },
            handleCurrentChange(currentPage) {
                that.page.currentPage = currentPage;
                that.search()
            },
        },
    })
</script>
</body>
</html>
